<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黑马商城首页</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
 			<!-- 导入 jquery -->
 			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 			<link rel="stylesheet" type="text/css" href="./css/stylexiaomicss.css">
</head>

<body>
	<div class="container-fluid">
		<!-- 加载头部加载 w   -->
		<div id="header"></div>

		<!-- 轮播图 -->
		<div class="container-fluid">
			<div id="carousel-example-generic" class="carousel slide"
				data-ride="carousel">
				<!-- 轮播图的中的小点 -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0"
						class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
				<!-- 轮播图的轮播图片 -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/1.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
					<div class="item">
						<img src="img/2.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
					<div class="item">
						<img src="img/3.jpg">
						<div class="carousel-caption">
							<!-- 轮播图上的文字 -->
						</div>
					</div>
				</div>

				<!-- 上一张 下一张按钮 -->
				<a class="left carousel-control" href="#carousel-example-generic"
					role="button" data-slide="prev"> <span
					class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a> <a class="right carousel-control" href="#carousel-example-generic"
					role="button" data-slide="next"> <span
					class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>

<div class="container-fluid">
			<div class="col-md-12">
				<h2>
					手机&nbsp;&nbsp;<img src="img/title2.jpg" />
				</h2>
			</div>
			<div class="col-md-10">
				
			</div>
			<div id="xiaomi_suouji"></div>
		</div> 

		<!-- 广告条 -->
		<div class="container-fluid">
			<img src="products/hao/ad.jpg" width="100%" />
		</div>

		<!-- 最新商品 -->
		<div class="container-fluid">
			<div class="col-md-12">
				<h2>
					平板&nbsp;&nbsp;<img src="img/title2.jpg" />
				</h2>
			</div>
			<div class="col-md-2"
				style="border: 1px solid #E7E7E7; border-right: 0; padding: 0;">
				<img src="products/hao/big01.jpg" width="205" height="404"
					style="display: inline-block;" />
			</div>
			<div class="col-md-10">
				<div class="col-md-6"
					style="text-align: center; height: 200px; padding: 0px;">
					<a href="product_info.htm"> <img
						src="products/hao/middle01.jpg" width="516px" height="200px"
						style="display: inline-block;">
					</a>
				</div>
				
				<div class="col-md-2" 
						style="text-align: center; height: 200px; padding: 10px 0px;">
						<a href="product_info.htm"> <img
							src="/" width="130" height="130"
							style="display: inline-block;">
						</a>
						<p>
							<a href="product_info.html" style='color: #666'></a>
						</p>
						<p>
							<font color="#E4393C" style="font-size: 16px">&yen;</font>
						</p>
				</div>
				
				
				
				
			</div>
		</div>
	</div>
	
	<!-- 加载尾部-->
	<div id="footer"></div>
	
	<script src="https://www.layuicdn.com/layui/layui.all.js"></script>
</body>
</html>

<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');


</script>

 <script type="text/javascript">
	   	layui.use(['form','jquery'],function(){
	   		var $=layui.jquery;
	   		var html="";
	   		$.post('/heima/findGoodsByCriteria',{},function(date){
	   			for(var i=0;i<date.length;i++){
	   				var str ='<div class="remen fl">';
		   			str+='<div class="xinpin"><span>新品</span></div>';
		   			str+='<div class="tu"><a href=""><img width="200px" src="'+date[i].gphoto+'"></a></div>';
		   			str+='<div class="miaoshu"><a href="">'+date[i].gname+'</a></div>';
		   			str+='<div class="jiage">'+date[i].gprice+'</div>';
		   			str+='<div class="pingjia">372人评价</div>';
		   			str+='<div class="piao">';
		   			str+='<a href="">';
		   			str+='<span>发货速度很快！很配小米6！</span>';
		   			str+='<span>来至于mi狼牙的评价</span>';
		   			str+='</a></div></div>';
		   			html+=str;
	   			}
	   			$("#xiaomi_suouji").html(html);
	   		},'json');
	   	});
	</script>
